<template>
  <div class="addDish">
    <h2>添加菜品</h2>
    <el-form label-width="100px">
      <el-form-item label="菜品图片:">
        <!-- on-success处理上传成功如何处理 -->
        <!-- before-upload处理准备上传到服务器前如何处理 -->
        <!-- name字段必须和服务器multer中间件定义的 文件名一样 -->
        <el-upload name="dishImg" class="xfn-uploader" :before-upload="beforeUpload" :on-success="doUploadSucc" :action="uploadAction">
          <img v-if="imageUrl" :src="imageUrl" alt="" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="菜品标题">
        <el-input v-model="fromData.title" placeholder="请输入菜品标题"></el-input>
      </el-form-item>
      <el-form-item label="菜品价格">
        <el-input v-model="fromData.price" placeholder="请输入菜品价格"></el-input>
      </el-form-item>
      <el-form-item label="菜品描述">
        <el-input v-model="fromData.detail" placeholder="请输入菜品描述"></el-input>
      </el-form-item>
      <el-form-item label="菜品所属分类">
        <el-input v-model="fromData.categoryId" placeholder="1肉 2海鲜 3 丸子 4蔬菜 5菌菇"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="addDish">立即添加</el-button>
  </div>
</template>

<style lang="scss">
.addDish {
  .el-upload {
    border: 1px dashed #aaa;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 250px;
    height: 177px;
    &:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  img {
    max-width: 100%;
  }
}
</style>

<script>
export default {
  data() {
    return {
      uploadAction: this.$store.state.globalSettings.apiUrl + "/dish/image",
      imageUrl: "", //上传成功服务器返回的image地址,
      //保存要上传的菜品其他属性
      fromData: {
        title: "",
        imgUrl: "", //菜品的图片在服务器上保存的文件名称 回传给数据库
        price: "",
        detail: "",
        categoryId: "",
      },
    };
  },
  methods: {
    //上传图片成功后客户端得到响应结果后触发
    doUploadSucc(res, file) {
      console.log(res, "res");
      console.log(file, "file");
      //把上传的文件编码转为 DataUrl字符串
      this.imageUrl = URL.createObjectURL(file.raw);
      //将上传成功的文件名 保存给fromData字段 用于传给服务器
      this.fromData.imgUrl = res.fileName;
    },
    //准备上传图片前 验证图片格式是否符合要求
    beforeUpload(file) {
      console.log("开始检查图片格式...");
      //判断上传文件是否是 jpg格式 /Png格式
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //向服务器发送请求 保存当前菜品到菜品列表
    addDish() {
      console.log(this.fromData);
      //发送axios 添加菜品
      let url = this.$store.state.globalSettings.apiUrl + "/dish";
      this.axios.post(url, this.fromData).then((res) => {
        console.log(res, "上传成功");
        this.$message({ message: "上传成功", type: "success" });
      });
    },
  },
};
</script>
